<template>
  <div class="w-full" :class="itemsClassMap[type]">
    <div v-for="item in items" :class="itemClassMap[type]" class="flex rounded-lg cursor-pointer items-center"
         @click="itemClick($event, item)"
    >
      <img v-if="item.img" :src="item.img"
           :style="{backgroundImage: 'linear-gradient(120deg, ' + item.color + '91 0%, ' + item.color + ' 100%)'}"
           :class="[imgClassMap[type], imgClass]" class="object-fill bg-slate-100 rounded-lg flex-none"
      >
      <div v-if="type !== 'app' && type !== 'grid4'" class="grow flex">
        <div class="grow flex flex-wrap px-2 w-12">
          <div class="w-full flex overflow-x-hidden" style="white-space: nowrap">
            <div class="text-base">
              {{ item.title }}
            </div>
            <div v-for="tag in item.tags" style="background-color: #aaaaaa33;"
                 class="mt-1 text-xs leading-4 h-4 rounded-lg text-slate-300 ml-1 px-1"
            >
              {{ tag }}
            </div>
            <div v-if="item.tail" class="grow text-xs text-slate-400 leading-4 text-end">
              {{ item.tail }}
            </div>
          </div>
          <div v-if="item.intro" class="w-full text-xs text-slate-400 truncate" style="white-space: nowrap">
            {{ item.intro }}
          </div>
        </div>
        <div v-if="item.buttons" class="shrink flex items-center">
          <div v-for="button in item.buttons"
               class="text-slate-400 ml-2 hover:text-slate-50 truncate"
               @click="buttonClick($event, item, button)"
          >
            {{ button }}
          </div>
        </div>
      </div>
      <div v-else class="leading-4 w-full text-center truncate text-sm">
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
const richTypeSet = [ 'message', 'app', 'block', 'box', 'grid4' ] as const
export type RichType = typeof richTypeSet[number]

export interface Item {
  id?: string,
  img?: string,
  title: string,
  color?: string,
  tail?: string,
  intro?: string,
  tags?: string[],
  buttons?: string[],
  data?: any,
  ignored?: boolean
}

export default {}
</script>

<script lang="ts" setup>
import { PropType } from 'vue'

defineProps({
  type: {
    validator(value: RichType) {
      return richTypeSet.includes(value)
    },
    type: String,
    default: 'message'
  },

  items: {
    type: Array as PropType<Item[]>,
    required: true
  },

  imgClass: {
    type: String,
    required: false,
    default: () => 'message'
  },

  itemClick: {
    type: Function,
    required: false,
    default: () => null
  },

  buttonClick: {
    type: Function,
    required: false,
    default: () => null
  }
})

const itemsClassMap: Record<RichType, string> = {
  'app': 'flex flex-wrap',
  'message': 'flex flex-wrap',
  'block': 'flex flex-wrap',
  'box': 'grid grid-cols-2 gap-4',
  'grid4': 'grid grid-cols-4 gap-1',
}

const itemClassMap: Record<RichType, string> = {
  'app': 'flex-wrap justify-center w-30 p-4 px-2 hover:bg-secondary-500',
  'message': 'w-full h-14 px-2 hover:bg-secondary-500',
  'block': 'w-44 mb-2 h-14 px-2 hover:bg-secondary-500',
  'box': 'h-24 px-4 bg-secondary-500 hover:-translate-y-1 hover:shadow-lg',
  'grid4': 'flex-wrap justify-center w-30 p-4 px-2 hover:bg-secondary-500'
}

const imgClassMap: Record<RichType, string> = {
  'app': 'w-12 h-12 mb-2',
  'message': 'w-10 h-10',
  'block': 'w-11 h-11',
  'box': 'w-14 h-14',
  'grid4': 'w-11 h-11 mb-2'
}

</script>

<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>